extends ./layouts/default

block title
  title Movie Trailer 首页

block content
  style.
    header {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      background: #00474f;
      color: #E7DACB;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      z-index: 500;
    }

    @media (min-width: 768px) {
      .sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 4rem;
        z-index: 1000;
        height: calc(100vh - 4rem);
        border-right: 1px solid rgba(0,0,0,.1);
        order: 0;
        border-bottom: 1px solid rgba(0,0,0,.1);
      }

      .cat-links {
        display: block!important;
        max-height: calc(100vh - 9rem);
        overflow-y: auto;
        padding-top: 1rem;
        padding-bottom: 1rem;
        margin-right: -15px;
        margin-left: -15px;
      }
    }

    .sidebar-link {
      display: block;
      padding: .25rem 1.5rem;
      font-weight: 500;
      color: rgba(0,0,0,.65);
    }

    .sidebar .nav > li > a {
      display: block;
      padding: .25rem 1.5rem;
      font-size: 90%;
      color: rgba(0,0,0,.65);
    }

    .sidebar-item.active > .sidebar-inner {
      display: block;
    }
    .card {
      margin-bottom: 1.5rem;
    }
    .switcher {
      position: relative;
      padding: 1rem 15px;
      margin-right: -15px;
      margin-left: -15px;
      border-bottom: 1px solid rgba(0,0,0,.05);
    }
    .sidebar-toggle {
      line-height: 1;
      color: #212529;
    }
    .p-0 {
      padding: 0!important;
    }
    .ml-3, .mx-3 {
      margin-left: 1rem!important;
    }
    .btn-link {
      font-weight: 400;
      color: #007bff;
      background-color: transparent;
    }

  include ./includes/header

  .container-fluid
    .row
      .col-12.col-md-3.col-xl-2.sidebar
        .collapse.cat-links
          .sidebar-item.active
            a.sidebar-link(href='/') Links
            ul.nav.sidebar-inner
              li.active.sidebar-inner-active
                a(href='/') Link1
              li.sidebar-inner-active
                a(href='/') Link2
      .col-12.col-md-9.col-xl-9.py-md-3.pl-md-5.content
        .row
          .col-md-6
            .card
              img.card-img-top(src='https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2555923582.webp', data-video='http://183.222.102.64/cache/vt1.doubanio.com/201906281924/e0a09183ad29ace02f261181299f36d0/view/movie/M/402480761.mp4?ich_args2=396-28192401042828_427377e44db9fec057c3a2442362e57a_10555401_9c89622dd0c1f0d1903d518939a83798_3f8f4faf821248196e1fa4bd01164591')
              .card-body
                h4.card-title 爱宠大机密2
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
          .col-md-6
            .card
              img.card-img-top(src='https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2558138425.webp', data-video='http://vt1.doubanio.com/201906281819/44096d032b278fc8efd4a6fb58894910/view/movie/M/402470832.mp4')
              .card-body
                h4.card-title 哪吒之魔童降世
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
        .row
          .col-md-6
            .card
              img.card-img-top(src='https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2559658750.webp', data-video='http://vt1.doubanio.com/201906281911/ac8d3b8d7ba3e7b4de8a46a9ef564a42/view/movie/M/402480591.mp4')
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
          .col-md-6
            .card
              img.card-img-top(src='https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2558293106.webp', data-video='http://vt1.doubanio.com/201906281910/aca3d308fe5cd4842c62b04cc793b915/view/movie/M/402480749.mp4')
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
  #myModal.modal.fade.bd-example-modal-lg(tabindex="-1", role="dialog", aria-labelledby="myLargeModalLabel", aria-hidden="true")
    .modal-dialog.modal-lg
      #videoModal.modal-content

  include ./includes/script

  script.
    var player = null

    $(document).ready(function () {

      $('#myModal').on('hidden.bs.modal', function (e) {
        if (player && player.pause) player.pause()
      })
    

      $('.card-img-top').click(function (e) {
        var video = $(this).data('video')
        var image = $(this).attr('src')
        
        $('#myModal').modal('show')
        
        if (!player) {
          player = new DPlayer({
            container: document.getElementById('videoModal'),
            screenshot: false,
            autoplay: true,
            video: {
              url: video,
            }
          })
        } else {
          if (player.video.currentSrc !== video) {
            player.switchVideo({
              url: video,
              autoplay: true,
            })
          }
        }
      })
    })